<%@ page import="com.entity.Favour" %><%--
  Created by IntelliJ IDEA.
  User: ZXW
  Date: 2022/5/2
  Time: 11:07
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>

    <!-- 静态包含base标签 jQuery文件 -->
    <%@include file="/pages/common/head.jsp"%>

    <link rel="stylesheet" href="static/css/common.css">
    <link rel="stylesheet" href="static/css/blog_detail.css">

    <script type="text/javascript">
        $(function (){
            var unlike = document.getElementById("unlike");
            var like = document.getElementById("like");

            var collect = document.getElementById("collect");
            var notcollect = document.getElementById("notcollect");

            $.getJSON("http://localhost:8080/CSDN/user/favourServlet","action=isFavour&blogId=${sessionScope.blog.id}&username=${sessionScope.user.username}",function (data){
                if(data.favour==true) {
                    //说明当前用户没有点赞当前博客
                    unlike.style.display="none";
                    like.style.display="block";

                }else {
                    //说明当前用户有点赞当前博客
                    unlike.style.display="block";
                    like.style.display="none";
                }

            });


            <%--var deleteComment = document.getElementById("deleteComment");--%>
            <%--// 给 【删除】绑定单击事件--%>

            <%--$("#deleteComment").click(function (){--%>

            <%--    $.getJSON("http://localhost:8080/CSDN/user/commentServlet",--%>
            <%--        "action=isDeleteComment&username=${sessionScope.user.username}&blogId=${sessionScope.blog.id}",--%>
            <%--        function (data){--%>
            <%--            // if(data.isdelete==true) {--%>
            <%--            //     deleteComment.style.display="block";--%>
            <%--            //--%>
            <%--            // }else {--%>
            <%--            //     deleteComment.style.display="none";--%>
            <%--            // }--%>
            <%--            console.log(data);--%>

            <%--        });--%>

            <%--});--%>

            $("#like").click(function (){
                unlike.style.display="block";
                like.style.display="none";
                //保存点赞数据
                $.getJSON("http://localhost:8080/CSDN/user/favourServlet","action=saveFavour&blogId=${sessionScope.blog.id}&username=${sessionScope.user.username}",function (data){});
                //重新查询点赞数
                $.getJSON("http://localhost:8080/CSDN/user/favourServlet","action=queryFavourByBlogId&blogId=${sessionScope.blog.id}",function (data){});
                <%--$("span.favourMsg").text( ${sessionScope.favourNum});--%>

            });
            $("#unlike").click(function (){

                unlike.style.display="none";
                like.style.display="block";
                //保存删除点赞数据
                $.getJSON("http://localhost:8080/CSDN/user/favourServlet","action=deleteFavour&blogId=${sessionScope.blog.id}&username=${sessionScope.user.username}",function (data){});
                //重新查询点赞数
                $.getJSON("http://localhost:8080/CSDN/user/favourServlet","action=queryFavourByBlogId&blogId=${sessionScope.blog.id}",function (data){});
                <%--$("span.favourMsg").text( ${sessionScope.favourNum});--%>
            });


            <%--&blogId=${sessionScope.blog.id}&username=${sessionScope.user.username}--%>
            $.getJSON("http://localhost:8080/CSDN/user/collectionServlet","action=isCollection&username=${sessionScope.user.username}",function (data){
                if(data.collection==true) {
                    //说明当前用户没有收藏当前博客
                    notcollect.style.display="none";
                    collect.style.display="block";


                }else {
                    //说明当前用户有收藏当前博客
                    notcollect.style.display="block";
                    collect.style.display="none";
                }

            });
            $("#collect").click(function (){
                notcollect.style.display="block";
                collect.style.display="none";


                //保存收藏数据
                $.getJSON("http://localhost:8080/CSDN/user/collectionServlet","action=saveCollection&username=${sessionScope.user.username}",function (data){});
                //重新查询收藏数
                <%--&blogId=${sessionScope.blog.id}--%>
                $.getJSON("http://localhost:8080/CSDN/user/collectionServlet","action=queryCollectionNumByUserId&username=${sessionScope.user.username}",function (data){});


            });
            $("#notcollect").click(function (){
                notcollect.style.display="none";
                collect.style.display="block";

                //删除收藏数据
                $.getJSON("http://localhost:8080/CSDN/user/collectionServlet","action=deleteCollection&username=${sessionScope.user.username}",function (data){});
                //重新查询收藏数
                <%--&blogId=${sessionScope.blog.id}--%>
                $.getJSON("http://localhost:8080/CSDN/user/collectionServlet","action=queryCollectionNumByUserId&username=${sessionScope.user.username}",function (data){});
            });

            //评论事件ajax处理
            $('.btn').click(function(){
                //取得content的值

                var commentContext=$('#commentContext').val();

                if(commentContext==''){
                    alert("评论为空！无法提交！");
                    return false;
                }else {
                    <%--$.getJSON("http://localhost:8080/CSDN/user/commentServlet","action=addComment&userName=${sessionScope.user.username}&blogId=${sessionScope.blog.id}&authorId=${sessionScope.blog.userId}",function (data){});--%>

                }

            })



        });


    </script>
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="image/log.png" alt="">
    <span class="title">我的博客系统</span>
    <!-- 使用 span 把左右两侧的元素给撑开 -->
    <span class="spacer"></span>
<%--    <a href="blogServlet?action=queryBlog&username=${sessionScope.user.username}">${sessionScope.user.username}的主页</a> --%>
    <a href="index.jsp">主页</a>
<%--    <a href="pages/blog/blog_edit.jsp">写博客</a>--%>
    <a href="userServlet?action=logout">注销</a>
</div>
<!-- 版心 -->
<div class="container">
    <!-- 左侧区域，显示用户信息 -->
    <div class="container-left">
        <!-- 用户详情 -->
        <div class="card">
            <!-- 用户的头像 -->
            <img src="image/head.jpg" alt="">
            <!-- 用户名 -->

            <c:if test="${not empty sessionScope.queryUserName}">${sessionScope.queryUserName}</c:if>
            <c:if test="${empty sessionScope.queryUserName}">${sessionScope.user.username}</c:if>
            <!-- 其它信息 -->





        </div>
    </div>
    <!-- 右侧区域，显示博客列表 -->
    <div class="container-right">
        <!-- 使用这个 div 来放博客内容 -->
        <div class="blog-content">
            <!-- 博客的标题 -->
            <h3>博客全文内容</h3>
            <!-- 博客的日期 -->
<%--            <div class="date">2022-2-16</div>--%>
            <!-- 博客的内容 -->

            <div class="detail">
                <p>
    ${sessionScope.blog.content}
    </p>
            </div>

<%--            <div class="author">--%>
<%--                <p>--%>
<%--                    ${sessionScope.blog.user}--%>
<%--                </p>--%>
<%--            </div>--%>

        </div>
        <input id="like" style="display: none;" type="button" value="点赞"/>
        <input id="unlike" style="display: none;" type="button" value="取消点赞" />

        <input id="collect" style="display: none;" type="button" value="收藏"/>
        <input id="notcollect" style="display: none;" type="button" value="取消收藏" />

        点赞数：
        <span class="favourMsg">
        ${sessionScope.favourNum}
        </span>
        收藏数：
        <span class="collectionMsg">

            ${sessionScope.collectionNum}
        </span>

        <!-- 发表评论 -->
        <div id="comment">
            <h3><strong>发表评论:</strong></h3>
            <%--$.getJSON("http://localhost:8080/CSDN/user/commentServlet","action=addComment&userName=${sessionScope.user.username}&blogId=${sessionScope.blog.id}&authorId=${sessionScope.blog.userId}",function (data){});--%>

            <form action="user/commentServlet" method="get">

                <input type="hidden" name="action" value="addComment"/>
                <input type="hidden" name="userName" value="${sessionScope.user.username}"/>
                <input type="hidden" name="blogId" value="${sessionScope.blog.id}"/>
                <input type="hidden" name="authorId" value="${sessionScope.blog.userId}"/>

                    <p><span></span><textarea rows="10" id="commentContent" name="comment" cols="30" class="text-textarea"></textarea></p>
                    <p style="text-align:right;">
                    <input type="submit" class="btn" value="发布评论" id="submit"></p>

            </form>


        </div>

        <div id="commentArea">
<%--            --%>
<%--            <form action="user/commentServlet" method="get">--%>
            <h3><strong>评论区:</strong></h3>
            <c:forEach items="${sessionScope.comments}" var="comments">
<%--            <input  type="hidden" name="action" value="isDeleteComment"/>--%>
<%--                <input  type="hidden" name="userId" value="${comments.userId}"/>--%>
<%--                <input  type="hidden" name="userName" value="${comments.userName}"/>--%>
<%--                <input  type="hidden" name="commentId" value="${comments.id}"/>--%>
<%--                <input  type="hidden" name="blogId" value="${comments.blogId}"/>--%>
<%--                <input  type="hidden" name="currentUserName" value="${sessionScope.user.username}"/>--%>

                ${comments.userName}:
                <div   class="desc">
                        ${comments.comment}<br/><br/>
<%--                            <input id="deleteComment"  type="submit" value="删除评论" /><br/>--%>

 <a class="deleteComment"
href="user/commentServlet?action=isDeleteComment&commentId=${comments.id}&blogId=${comments.blogId}&userName=${comments.userName}&userId=${comments.userId}&currentUserName=${sessionScope.user.username}">删除评论</a><br/>

            </c:forEach>
<%--            </form>--%>
        </div>
    </div>
</div>
</div>
</body>
</html>
